<template>
	<view>
			<view class="top">
				<u-subsection
					:list="list"
					mode="button"
					:current="current1"
					@change="change1"
					activeColor = "#FFF"
					inactiveColor="#FFF"
					buttonColor='#FFBE53'
					hbgColor = '#FFBE53'
					bgColor = 'transparent'
					borderColor = "1upx solid #FFBE53"
				></u-subsection>
			</view>
			
			<view class="thread">
				<view class="nd">
					<image class="heads" style="" :src='userslist[1].head' ></image>
					<view class="names" style="">
						{{userslist[1].username}}
					</view>
					<view class="jifen" style="">
						<text>{{userslist[1].integral}}</text>
						<text>积分</text>
					</view>
				</view>
				<view class="st">
					<image  style="width: 140upx;height: 140upx;left: 50%;margin-left: -70upx;border-radius: 999rem;" :src='userslist[0].head' ></image>
					<view class="names" style="">
						{{userslist[0].username}}
					</view>
					<view class="jifen" style="">
						<text>{{userslist[0].integral}}</text>
						<text>积分</text>
					</view>
				</view>
				<view class="rd">
					<image class="heads" style="" :src='userslist[2].head' ></image>
					<view class="names" style="">
						{{userslist[2].username}}
					</view>
					<view class="jifen" style="">
						<text>{{userslist[2].integral}}</text>
						<text>积分</text>
					</view>
				</view>
			</view>
			
			<view class="lists">
				<!-- <image src="../../static/tabsIcon/clubbottom.jpg" mode="" style="position: absolute;width: 100%;height: 100%;z-index: 0;border-top: 5upx solid #FFFFFF;border-radius: 80upx 80upx 0 0;border-radius: 80upx 80upx 0 0;overflow: hidden;"></image> -->
				<view class="users" v-for="(index,item) in userslist" v-if="item >= 3">
					<text class="num" style="">{{item+1}}</text>
					<view class="usershead">
						<image  :src='index.head' mode="" style="width: 70upx;height: 70upx;border-radius: 999rem;"></image>
					</view>
					
					<text class="usersname" style="">{{index.username}}</text>
					<text class="usersintegral" style="">{{index.integral}}</text>
				</view>
				<view class="texts">
					<view style="text-align: center;font-size: 40upx;margin: 40upx 0;width: 100%;">邀请规则</view>
					<u-parse :content="maintext"></u-parse>
					<view style="text-align: center;width: 100%;margin: 0 auto;left: 0;right: 0;" @longpress="code(urls)">
						<image style="width: 240upx;height: 240upx;" :src='urls' mode=""></image>
					</view>
					
				</view>
				
			</view>
			
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maintext: `<span class="infoBox1">
            邀请好友活动规则
            <br />
            一、活动参加条件：
            <br />
            <br />
            本活动面向贝贝所有用户，参与活动的用户需绑定手机号
            <br />
            被邀请者的手机号必须未注册过贝贝账号
            <br />
            活动时间：2016.12.16-2016.12.31
            <br />
            二、活动奖励：
            <br />
            <br />
            每人每天每分享一次，即可刮一次奖，奖品内容（随机5-100无门槛品牌红包），分享越多刮到的红包金额越大；
            <br />
            好友在分享页面登记手机号后，下载贝贝app，用登记手机号注册成功后即可获得70元的大礼包，包含10元无门槛现金券1张（有效期为48小时），满79-10（奶粉、纸尿裤、虚拟商品、圈儿类除外）现金券1张（有效期为7天），满159-20（奶粉、纸尿裤类、虚拟商品、圈儿类除外）现金券1张（有效期为7天），满399-30（奶粉、纸尿裤类、虚拟商品、圈儿类除外）现金券1张（有效期为7天）;
            <br />
            好友首次下单支付成功2小时后（实付金额&gt;5元），邀请者在24小时内可获得5元无门槛现金券1张；
            <br />
            邀请好友越多，最终大奖iphone7中间概率越大（奖品在活动结束后7个工作日内抽取并寄出）。
            <br />
            三、声明：
            <br />
            <br />
            活动期间如用户使用不正当手段获取奖励，贝贝有权利在事先不通知用户的情况下取消对其的奖励或者禁用该用户账号；用户参与本活动视为用户同意本活动规则；
            <br />
            如有疑问请联系贝贝客服。
          </span>	`,
		current1: 0,
		list: ['日榜', '月榜', '总榜'],
		userslist:[
			{
				username:'儒雅卡妈妈',
				integral:'99999999',
				head:'../../static/tabsIcon/t03.jpg',
			},
			{
				username:'呆萌少女',
				integral:'999999999',
				head:'../../static/tabsIcon/t04.jpg',
			},
			{
				username:'胖胖丸子',
				integral:'125',
				head:'../../static/tabsIcon/t05.jpg',
			},

			{
				username:'张三',
				integral:'99999999',
				head:'../../static/tabsIcon/t04.jpg',
			},
			{
				username:'李四',
				integral:'125',
				head:'../../static/tabsIcon/t05.jpg',
			},

			{
				username:'王五',
				integral:'225',
				head:'../../static/tabsIcon/t04.jpg',
			},
			{
				username:'赵六',
				integral:'125',
				head:'../../static/tabsIcon/t05.jpg',
			},
			{
				username:'孙七',
				integral:'225',
				head:'../../static/tabsIcon/t04.jpg',
			},
			{
				username:'铁柱',
				integral:'125',
				head:'../../static/tabsIcon/t05.jpg',
			},
			{
				username:'当前用户',
				integral:'125',
				head:'../../static/tabsIcon/t05.jpg',
			},
			{
				username:'姓名长度占位测试中十一',
				integral:'125',
				head:'../../static/tabsIcon/t05.jpg',
			},
		],
		urls:'../../static/tabsIcon/ma.jpg'
			}
		},
		methods: { 
			// 保存图片
			code(url) {
				uni.downloadFile({
					url,
					success: (res) => { 
						console.log(res.tempFilePath)
						// 获取到图片本地地址后再保存图片到相册(因为此方法不支持远程地址)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功！"
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
					}
				})
			},
			change1(index) {
				this.current1 = index
			},
			change2(index) {
				this.current2 = index
			},
			change3(index) {
				this.current3 = index
			},
			change4(index) {
				this.current4 = index
			}
		}
	}
</script>
<style>

</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	page{
		background-color: rgb(229, 231, 233);
	}
	.top{
		
		.u-subsection__item__text{
			.u-subsection__item__text{
				z-index: 10;
			}
		}
		
	}
	.thread{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;
		height: 280upx;
		width: 100%;
		.st{
			margin-top: 20upx;
			flex-grow:1;
			height:250upx;
			
		}
		.nd{
			margin-top: 90upx;
			flex-grow:1;
			height:220upx;
		}
		.rd{
			margin-top: 90upx;
			flex-grow:1;
			height:220upx;
		}
	}
	.heads{
		left: 50%;
		margin-left: -50upx;
		width: 100upx;
		height: 100upx;
		border-radius: 999rem;
	}
	.names{
		text-align: center;
		font-size: 32upx;
		color:#FFFFFF;
	}
	.jifen{
		text-align: center;
		font-size: 24upx;
		color:#FFFFFF;
	}
	.lists{
		width: 100%;
		overflow: hidden;
		border-radius: 80upx 80upx 0 0;
		background-image: url(../../static/tabsIcon/clubbottom.jpg);
		// background-color: transparent;
		// background-color: red;
	}
	.users{
		position: relative;
		margin-top: 20upx;
		height: 80upx;
		z-index: 10;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-around;

		.num{
			width: 10%;
			color: #FFFFFF;
			flex-grow:1;
			text-align: center;
		}
		.usershead{
			height:40upx;width: 40upx;
			flex-grow:1;			
		}
		.usersname{
			color: #FFFFFF;
			width: 40%;
			flex-grow:2;
			text-align: center;
			border-bottom: 1upx solid #FFFFFF;
			overflow: hidden;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
			line-height: 60upx;
			font-size: 30upx;
		}
		.usersintegral{
			color: #FFFFFF;
			
			width: 16%;
			text-align: left;
			border-bottom: 1upx solid #FFFFFF;
			line-height: 60upx;
			font-size: 30upx;
			overflow: hidden;
			flex-grow:1;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
		}
	}
	.texts{
		position: relative;
		width: 100%;
		color: #FFFFFF;
		font-size: 30upx;
		width: 85%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
</style>
